<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>AIJIYIN | EditPassword</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>
            <div>
                <h2 class="logo-name">AIJIYIN</h2>
            </div>
            <h3>修改密码</h3>
            <p>Modify user password.</p>
            <form class="m-t form-horizontal" role="form"  action="editPassword"   th:method="post" >
                <div class="form-group">
                    <label for="userName">用户名：</label>
                    <input type="text" id="userName" class="form-control" placeholder="Name" name="userName" required=""/>
                </div>
                <div class="form-group">
                    <label for="password">旧密码：</label>
                    <input type="password" id="password" class="form-control" placeholder="旧密码" name="password" required=""/>
                </div>
                <span class="tip1" style="color: red;">修改前后的密码一致！</span>
                <div class="form-group">
                    <label for="newPassword">新密码：</label>
                    <input type="password" id="newPassword" onblur="checkpas();" class="form-control" placeholder="新密码" name="newPassword" required=""/>
                </div>
                <span class="tip2" style="color: red;">两次输入的密码不一致！</span>
                <div class="form-group">
                    <label for="confirmPassword">确认密码：</label>
                    <input type="password" id="confirmPassword" onblur="checkpas1();" class="form-control" placeholder="确认密码" name="confirmPassword" required=""/>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b" onclick="checkpas2();">Confirm</button>
            </form>
        </div>
    </div>

    <!-- Mainly scripts -->
    <script th:src="@{/js/jquery-2.1.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- Sweet alert -->
    <script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

    <!-- iCheck -->
    <script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>

    <!-- Mainly scripts -->
    <script th:src="@{/js/jquery-2.1.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- Sweet alert -->
    <script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>
    <script>
        $(".tip1").hide();
        $(".tip2").hide();
        function checkpas() {
            var oldpas = document.getElementById("password").value;
            var newpas = document.getElementById("newPassword").value;
            if (oldpas == newpas) {
                $(".tip1").show();
            } else {
                $(".tip1").hide();
            }
        };
        function checkpas1() {
            var pas1 = document.getElementById("newPassword").value;
            var pas2 = document.getElementById("confirmPassword").value;
            if (pas1 != pas2) {
                $(".tip2").show();
            } else {
                $(".tip2").hide();
            }
        };
        function checkpas2() {
            var pas3 = document.getElementById("newPassword").value;
            var pas4 = document.getElementById("confirmPassword").value;
            if (pas3 != pas4) {
                alert("两次输入的密码不一致！");
                return false;
            }
        };
    </script>

</body>

</html>
